<template>
  <div class="app-container">
    <div style="text-align: center">
      <h2 class="text-center">{{ form.source }}</h2>
    </div>
    <el-row :gutter="24" style="margin-top: 50px">

      <el-col :span="8" class="text-center">
        试卷时长：{{ form.totalTime }}分钟
      </el-col>
      <el-col :span="8" class="text-center">
        试卷类型：{{ form.type }}
      </el-col>
    </el-row>
    <el-card style="margin-top: 20px">
      <div style="margin-bottom: 20px">
        <h5>一、选择题</h5>
      </div>
      <div v-for="item in multi" :key="item.questionId" class="qu-content">
        <p style="margin-top: 5px">{{ item.questionId}}.{{ item.question }}</p>
        <div style="margin-top: 10px">
          <el-radio  :label="item.answerA"  v-model="item.rightAnswer" >
            A.{{ item.answerA }}
          </el-radio>
          <el-radio :label="item.answerB" v-model="item.rightAnswer">
            B.{{ item.answerB }}
          </el-radio>
          <el-radio :label="item.answerC" v-model="item.rightAnswer">
            C.{{ item.answerC }}
          </el-radio>
          <el-radio :label="item.answerD" v-model="item.rightAnswer">
            D.{{ item.answerD }}
          </el-radio>
          <div style="margin-top: 10px">
            <p style="font-size: 14px; color: #FDC8C8">建议或选项说明:</p>
            <p style="font-size: 12px;color: #dd6572"> {{ item.analysis }}</p>
          </div>
        </div>
      </div>


      <div style="margin: 20px 0px">
        <h5>二、判断题</h5>
      </div>
      <div v-for="item in judge" :key="item.questionId" class="qu-content">
        <p style="margin-top: 5px">{{ item.questionId}}.{{ item.question }}</p>
        <div style="margin-top: 10px">
          <el-radio  label="T"  v-model="item.answer" >
            是
          </el-radio>
          <el-radio label="F" v-model="item.answer">
            否
          </el-radio>
          <div style="margin-top: 10px">
            <p style="font-size: 14px; color: #FDC8C8">建议或选项说明:</p>
            <p style="font-size: 12px;color: #dd6572"> {{ item.analysis }}</p>
          </div>
        </div>
      </div>

      <div style="margin: 20px 0px">
        <h5>三、简答题</h5>
      </div>
      <div v-for="item in fill" :key="item.questionId" class="qu-content">
        <p style="margin-top: 5px">{{ item.questionId}}.{{ item.question }}</p>
        <div style="margin-top: 10px">
          <p>{{ item.answer }}</p>
        </div>
        <div style="margin-top: 10px">
          <p style="font-size: 14px; color: #FDC8C8">建议或选项说明:</p>
          <p style="font-size: 12px;color: #dd6572"> {{ item.analysis }}</p>
        </div>
      </div>
    </el-card>

  </div>
</template>
<script>


  export default {
    data () {
      return {
        // 试卷ID
        paperId : '' ,
        paperData : {
          quList : []
        } ,
        form : {} ,
        radioValues : {} ,
        multiValues : {} ,
        radioRights : {} ,
        multiRights : {} ,
        myRadio : {} ,
        myMulti : {} ,
        multi : [] ,
        fill : [] ,
        judge : [] ,
        topic : {}
      }
    } ,
    created () {
      const id = this.$route.query.id
      if ( typeof id !== 'undefined' ) {
        this.paperId = id
        this.selectPaper ( this.paperId )
        this.getPaper ( this.paperId )
      }
    } ,
    methods : {
      selectPaper ( id ) {
        this.$axios ( `/api/paper/${ id }` ).then ( res => {
          this.topic = { ... res.data }
          this.multi = this.topic[ 1 ]
          this.fill = this.topic[ 2 ]
          this.judge = this.topic[ 3 ]
          console.log ( this.topic )

        } )
      } ,
      fetchData ( id ) {
        const params = { id : id }
        paperResult ( params ).then ( response => {
          // 试卷内容
          this.paperData = response.data
          // 填充该题目的答案
          this.paperData.quList.forEach ( ( item ) => {
            let radioValue = ''
            let radioRight = ''
            let myRadio = ''
            const multiValue = []
            const multiRight = []
            const myMulti = []

            item.answerList.forEach ( ( an ) => {
              // 用户选定的
              if ( an.checked ) {
                if ( item.quType === 1 || item.quType === 3 ) {
                  radioValue = an.id
                  myRadio = an.abc
                } else {
                  multiValue.push ( an.id )
                  myMulti.push ( an.abc )
                }
              }

              // 正确答案
              if ( an.isRight ) {
                if ( item.quType === 1 || item.quType === 3 ) {
                  radioRight = an.abc
                } else {
                  multiRight.push ( an.abc )
                }
              }
            } )

            this.multiValues[ item.id ] = multiValue
            this.radioValues[ item.id ] = radioValue

            this.radioRights[ item.id ] = radioRight
            this.multiRights[ item.id ] = multiRight

            this.myRadio[ item.id ] = myRadio
            this.myMulti[ item.id ] = myMulti
          } )

          console.log ( this.multiValues )
          console.log ( this.radioValues )
        } )
      } ,

      // 查询试卷信息
      getPaper ( id ) {
        this.$axios ( `/api/exam/${ id }` ).then ( res => { //根据试卷id请求后台
          if ( res.data.code == 200 ) {
            this.form = res.data.data
            console.log ( this.form )
          }
        } )
      }
    }
  }
</script>

<style scoped>

  .qu-content {

    border-bottom: #eee 1px solid;
    padding-bottom: 10px;

  }

  .qu-content div {
    line-height: 30px;
  }

  .el-checkbox-group label, .el-radio-group label {
    width: 100%;
  }

  .card-title {
    background: #eee;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
  }

  .card-line {
    padding-left: 10px
  }

  .card-line span {
    cursor: pointer;
    margin: 2px;
  }

  .app-container {
    margin-left: 30px;
  }
</style>

